<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>账号设置 - 1024导航</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .setting-nav-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .text-gradient {
                @apply bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="text-primary text-2xl font-bold">1024<span class="text-secondary">导航</span></div>
                <span class="hidden md:inline-block text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">v2.3</span>
            </div>

            <nav class="hidden md:flex items-center space-x-6">
                <a href="index.html" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="resources.html" class="text-gray-600 hover:text-primary transition-colors">资源</a>
                <a href="tools.html" class="text-gray-600 hover:text-primary transition-colors">工具</a>
                <a href="community.html" class="text-gray-600 hover:text-primary transition-colors">社区</a>
                <a href="about.html" class="text-gray-600 hover:text-primary transition-colors">关于</a>
            </nav>

            <div class="flex items-center space-x-3">
                <div class="relative hidden md:block">
                    <button class="flex items-center space-x-2 focus:outline-none">
                        <img src="https://picsum.photos/id/1005/40/40" alt="用户头像"
                            class="w-8 h-8 rounded-full object-cover">
                        <span class="text-sm font-medium">张小明</span>
                        <i class="fa fa-chevron-down text-xs text-gray-500"></i>
                    </button>
                </div>
                <button class="md:hidden text-gray-600 text-xl">
                    <i class="fa fa-bars"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 页面标题 -->
    <section class="py-10 bg-gradient-to-b from-white to-gray-50 border-b border-gray-100">
        <div class="container mx-auto px-4">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-[clamp(1.8rem,5vw,2.5rem)] font-bold mb-4 text-gradient">账号设置</h1>
                <p class="text-gray-600">管理您的个人信息和账号安全</p>
            </div>
        </div>
    </section>

    <!-- 设置内容区 -->
    <section class="py-8">
        <div class="container mx-auto px-4">
            <div class="max-w-6xl mx-auto">
                <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
                    <!-- 侧边导航 -->
                    <div class="lg:col-span-1">
                        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                            <div class="p-4 border-b border-gray-100">
                                <div class="flex items-center space-x-3">
                                    <img src="https://picsum.photos/id/1005/60/60" alt="用户头像"
                                        class="w-12 h-12 rounded-full object-cover">
                                    <div>
                                        <h3 class="font-medium">张小明</h3>
                                        <p class="text-gray-500 text-xs">普通会员</p>
                                    </div>
                                </div>
                            </div>

                            <nav class="p-2">
                                <a href="#profile"
                                    class="setting-nav-active flex items-center px-4 py-3 text-sm w-full mb-1 rounded">
                                    <i class="fa fa-user-circle w-5 text-center mr-3"></i>
                                    <span>个人资料</span>
                                </a>
                                <a href="#security"
                                    class="flex items-center px-4 py-3 text-sm w-full mb-1 rounded text-gray-600 hover:bg-gray-50">
                                    <i class="fa fa-shield w-5 text-center mr-3"></i>
                                    <span>账号安全</span>
                                </a>
                                <a href="#notifications"
                                    class="flex items-center px-4 py-3 text-sm w-full mb-1 rounded text-gray-600 hover:bg-gray-50">
                                    <i class="fa fa-bell w-5 text-center mr-3"></i>
                                    <span>通知设置</span>
                                </a>
                                <a href="#privacy"
                                    class="flex items-center px-4 py-3 text-sm w-full mb-1 rounded text-gray-600 hover:bg-gray-50">
                                    <i class="fa fa-lock w-5 text-center mr-3"></i>
                                    <span>隐私设置</span>
                                </a>
                                <a href="#billing"
                                    class="flex items-center px-4 py-3 text-sm w-full mb-1 rounded text-gray-600 hover:bg-gray-50">
                                    <i class="fa fa-credit-card w-5 text-center mr-3"></i>
                                    <span>账户充值</span>
                                </a>
                                <a href="#connected"
                                    class="flex items-center px-4 py-3 text-sm w-full mb-1 rounded text-gray-600 hover:bg-gray-50">
                                    <i class="fa fa-link w-5 text-center mr-3"></i>
                                    <span>关联账号</span>
                                </a>
                                <a href="#delete"
                                    class="flex items-center px-4 py-3 text-sm w-full rounded text-red-500 hover:bg-red-50 mt-4">
                                    <i class="fa fa-trash w-5 text-center mr-3"></i>
                                    <span>注销账号</span>
                                </a>
                            </nav>
                        </div>
                    </div>

                    <!-- 主要内容区 -->
                    <div class="lg:col-span-3">
                        <!-- 个人资料设置 -->
                        <div id="profile" class="bg-white rounded-xl shadow-sm p-6 mb-6">
                            <h2 class="text-xl font-bold mb-6">个人资料</h2>

                            <form class="space-y-6">
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
                                    <label class="text-sm font-medium text-gray-700 md:col-span-1">头像</label>
                                    <div class="md:col-span-2">
                                        <div class="flex items-center space-x-4">
                                            <img src="https://picsum.photos/id/1005/80/80" alt="当前头像"
                                                class="w-20 h-20 rounded-full object-cover">
                                            <div>
                                                <button type="button"
                                                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors text-sm mb-2">
                                                    <i class="fa fa-upload mr-1"></i> 上传新头像
                                                </button>
                                                <p class="text-gray-500 text-xs">支持JPG、PNG格式，建议尺寸200x200px</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <label for="username"
                                        class="text-sm font-medium text-gray-700 md:col-span-1 flex items-center">
                                        用户名 <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <div class="md:col-span-2">
                                        <input type="text" id="username" value="张小明"
                                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <p class="text-gray-500 text-xs mt-1">用户名由3-20个字符组成，支持字母、数字和下划线</p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <label for="nickname"
                                        class="text-sm font-medium text-gray-700 md:col-span-1">昵称</label>
                                    <div class="md:col-span-2">
                                        <input type="text" id="nickname" value="小明同学"
                                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <label for="email"
                                        class="text-sm font-medium text-gray-700 md:col-span-1 flex items-center">
                                        电子邮箱 <span class="text-red-500 ml-1">*</span>
                                    </label>
                                    <div class="md:col-span-2">
                                        <div class="flex">
                                            <input type="email" id="email" value="zhangxiaoming@example.com" disabled
                                                class="w-full px-4 py-2 border border-gray-300 rounded-l-md bg-gray-50 focus:outline-none">
                                            <button type="button"
                                                class="px-4 py-2 bg-primary text-white rounded-r-md hover:bg-primary/90 transition-colors text-sm">
                                                修改
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <label for="bio"
                                        class="text-sm font-medium text-gray-700 md:col-span-1">个人简介</label>
                                    <div class="md:col-span-2">
                                        <textarea id="bio" rows="3"
                                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">热爱编程和设计的前端开发者，喜欢分享优质资源。</textarea>
                                        <p class="text-gray-500 text-xs mt-1">最多可输入200个字符</p>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <label class="text-sm font-medium text-gray-700 md:col-span-1">性别</label>
                                    <div class="md:col-span-2 flex space-x-6">
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="gender" value="male" checked
                                                class="text-primary focus:ring-primary">
                                            <span class="ml-2 text-gray-700">男</span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="gender" value="female"
                                                class="text-primary focus:ring-primary">
                                            <span class="ml-2 text-gray-700">女</span>
                                        </label>
                                        <label class="inline-flex items-center">
                                            <input type="radio" name="gender" value="secret"
                                                class="text-primary focus:ring-primary">
                                            <span class="ml-2 text-gray-700">保密</span>
                                        </label>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                                    <label class="text-sm font-medium text-gray-700 md:col-span-1"></label>
                                    <div class="md:col-span-2 flex space-x-3">
                                        <button type="submit"
                                            class="px-6 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                                            保存修改
                                        </button>
                                        <button type="button"
                                            class="px-6 py-2.5 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors">
                                            取消
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <!-- 账号安全设置 -->
                        <div id="security" class="bg-white rounded-xl shadow-sm p-6">
                            <h2 class="text-xl font-bold mb-6">账号安全</h2>

                            <div class="space-y-6">
                                <div class="border-b border-gray-100 pb-6">
                                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                                        <div>
                                            <h3 class="font-medium">登录密码</h3>
                                            <p class="text-gray-500 text-sm mt-1">设置强壮的密码可以提高账号安全性</p>
                                        </div>
                                        <button type="button"
                                            class="mt-3 md:mt-0 px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors text-sm">
                                            修改密码
                                        </button>
                                    </div>
                                </div>

                                <div class="border-b border-gray-100 pb-6">
                                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                                        <div>
                                            <h3 class="font-medium">手机验证</h3>
                                            <p class="text-gray-500 text-sm mt-1">未绑定手机号，绑定后可用于登录和找回密码</p>
                                        </div>
                                        <button type="button"
                                            class="mt-3 md:mt-0 px-4 py-2 border border-primary text-primary rounded-md hover:bg-primary/5 transition-colors text-sm">
                                            立即绑定
                                        </button>
                                    </div>
                                </div>

                                <div class="border-b border-gray-100 pb-6">
                                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                                        <div>
                                            <h3 class="font-medium">二次验证</h3>
                                            <p class="text-gray-500 text-sm mt-1">开启后登录时需要输入验证码，提高账号安全性</p>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer mt-3 md:mt-0">
                                            <input type="checkbox" class="sr-only peer">
                                            <div
                                                class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-primary/50 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary">
                                            </div>
                                        </label>
                                    </div>
                                </div>

                                <div>
                                    <div class="flex flex-col md:flex-row md:items-center justify-between">
                                        <div>
                                            <h3 class="font-medium">登录日志</h3>
                                            <p class="text-gray-500 text-sm mt-1">最近的登录记录，查看是否有异常登录</p>
                                        </div>
                                        <button type="button"
                                            class="mt-3 md:mt-0 px-4 py-2 border border-gray-200 text-gray-700 rounded-md hover:bg-gray-50 transition-colors text-sm">
                                            查看详情
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="bg-gray-800 text-gray-300 py-10 mt-10">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white text-lg font-semibold mb-4">1024导航</h3>
                    <p class="text-sm text-gray-400 mb-4">精选互联网优质资源，打造高效便捷的导航平台，助力你的工作与学习。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-github text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-twitter text-xl"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white transition-colors">
                            <i class="fa fa-weixin text-xl"></i>
                        </a>
                    </div>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="index.html" class="text-gray-400 hover:text-white transition-colors">首页</a></li>
                        <li><a href="resources.html" class="text-gray-400 hover:text-white transition-colors">资源分类</a>
                        </li>
                        <li><a href="tools.html" class="text-gray-400 hover:text-white transition-colors">实用工具</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">最新收录</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">热门推荐</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">帮助支持</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用指南</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">资源提交</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">常见问题</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">联系我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">举报不良信息</a></li>
                    </ul>
                </div>

                <div>
                    <h3 class="text-white font-medium mb-4">关于我们</h3>
                    <ul class="space-y-2 text-sm">
                        <li><a href="about.html" class="text-gray-400 hover:text-white transition-colors">网站介绍</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">隐私政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">使用条款</a></li>
                        <li><a href="team.html" class="text-gray-400 hover:text-white transition-colors">团队成员</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition-colors">免责声明</a></li>
                    </ul>
                </div>
            </div>

            <div class="border-t border-gray-700 mt-8 pt-6 text-center text-sm text-gray-500">
                <p>© 2023 1024导航. 本站资源仅供学习交流使用，如有侵权请联系删除。</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }

            // 导航栏滚动效果
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3', 'shadow-sm');
            } else {
                header.classList.add('py-3', 'shadow-sm');
                header.classList.remove('py-2', 'shadow');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 侧边导航切换
        const navLinks = document.querySelectorAll('nav a[href^="#"]');
        navLinks.forEach(link => {
            link.addEventListener('click', (e) => {
                // 移除所有激活状态
                navLinks.forEach(item => item.classList.remove('setting-nav-active'));
                // 给当前点击的添加激活状态
                e.currentTarget.classList.add('setting-nav-active');
            });
        });
    </script>
</body>

</html>